<template>
    <div  class="box">

        <header>
            <van-icon name="arrow-left" class="header-left" @click="but" /><span><h4>{{nametop}}</h4></span>
        </header>
        <div style="clear: both"></div>
        <main class="outer" :style= "'background-image: url('+imgurl+')'">
<!--            :style= "'background-image: url('++')'"-->

        </main>
<!--        旋转图-->

        <div class="main-outer" v-show="flags" @click="startimg">
                <img :src="imgurl" alt="" id="imgrotate" ref="imgrotate">

        </div>
        <div class="lyric" v-show="!flags" @click="startimg" ref="lyrictext">
            <div v-for="(item,index) in lyricarr" :key="index"  :class="indextime==index? 'colortext':''" >
                {{item.conment}}
            </div>
        </div>

<!--        歌词-->


<!--        指针-->
        <div class="pointer" v-show="flags">
            <img src="../img/needle-ip6.png" alt="" id="pointer" ref="pointer">
        </div>
        <footer>
            <audio :src="audiourl" @timeupdate="chagetime" controls v-show="false" ref="audio"></audio>
            <van-slider v-model="value" bar-height="4px" active-color="#ee0a24"  @change="onChange" class="slider"  :max="max" />
            <div class="start">
              <img src="../img/play.png" alt="" v-show="flag" @click="start">
            </div>
            <div class="start">
                <img src="../img/pause.png" alt="" v-show="!flag" @click="start">
            </div>
            <div class="left">
                <img src="../img/pre_l.png" alt="">
            </div>
            <div class="left-box">
                <img src="../img/循环.png" alt="">
            </div>
            <div class="right">
                <img src="../img/pre_r.png" alt="">
            </div>
            <div class="right-box">
                <img src="../img/列表.png" alt="">
            </div>
        </footer>

    </div>
</template>

<script>
    import {getSongDetails,getLyrics} from "../api/api"
    export default {
        name: "listdetailr",
        data(){
            return{
                max:"",
                value: 50,
                nametop:"",
                    audiourl:"",
                imgurl:"",
                flag:true,
                paused:"",
                flags:true,
                lyric:null,
                lyricarr:[
                    {
                        time:"",
                        conment:""
                    }
                ],
                currentTime:"",
                indextime:""
            }
        },
        created() {
            console.log(this.$route.query.id)
            getSongDetails(this.$route.query.id).then((res)=>{
                // console.log(res)
                this.nametop=res.songs[0].al.name
                this.imgurl=res.songs[0].al.picUrl
                this.audiourl=`https://music.163.com/song/media/outer/url?id=${this.$route.query.id}.mp3`
            }),
                getLyrics(this.$route.query.id).then((res)=>{
                    console.log(res)
                    this.lyric=res.lrc.lyric.split(/\n/)
                    console.log(this.lyric)
                    let obj=res.lrc.lyric.split(/\n/)
                    // // console.log(this.lyric)


                    obj.forEach(item=>{
                        console.log(item)
                        let lyrica= /\[\d*:\d*\.\d*\]/g
                        //时间
                        let timer=item.match(lyrica)
                        console.log(timer)
                        console.log(this.lyric[0].replace(timer,""))
                        if(timer){
                            timer.forEach(i=>{
                                // /处理时间
                                //分
                                let min=Number(i.match(/\[\d*/)[0].replace("[",""));
                                //秒
                                let mec=Number(i.match(/:\d*/)[0].replace(":",""))
                                let hove=min*60+mec
                                console.log(hove)
                                //歌词
                                let lyricab=item.replace(timer,"")
                                console.log(lyricab)
                                this.lyricarr.push(
                                    {
                                        time:hove,
                                        conment:lyricab
                                    }
                                )
                            })
                        }
                    })
                })
        },


        methods: {
            onChange(value) {
                // Toast('当前值：' + value);
                 console.log('当前值：' + value)
                console.log(this.$refs.slider)
                this.$refs.audio.currentTime=value
            },
            chagetime(e){
                //播放时间
                // console.log(e.target.currentTime)
                this.value=e.target.currentTime
                this.currentTime=e.target.currentTime
                // console.log(e.target.duration)
                this.max=e.target.duration
            }
,
            but() {
                this.$router.go(-1)
            },
            startimg(){
                this.flags=!this.flags
            },
            start() {
                this.flag = !this.flag
                if (this.flag) {
                    document.getElementById("pointer").style.transform = "rotate(0deg)"
                    document.getElementById("pointer").style.transformOrigin = "left top"
                    document.getElementById("imgrotate").style.animationPlayState = "paused"
                    // console.log()
                    this.$refs.audio.pause()

                } else {
                    document.getElementById("pointer").style.transform = "rotate(20deg)"
                    document.getElementById("pointer").style.transformOrigin = "left top"

                    document.getElementById("imgrotate").style.animationPlayState = "running"
                    this.$refs.audio.play()
                }
            }
        },
        watch:{
            currentTime(){
                // eslint-disable-next-line no-debugger
                // debugger
                console.log(this.currentTime)
                for(let i=0;i<this.lyricarr.length;i++){
                    // eslint-disable-next-line no-debugger
                    // debugger
                    // console.log(i)
                    if (this.lyricarr[i].time>this.currentTime){
                        // eslint-disable-next-line no-debugger
                        // debugger
                        // console.log(i)

                        if (i>0){
                            this.indextime=i - 1
                            this.$refs.lyrictext.scrollTop=this.$refs.lyrictext.children[this.indextime].offsetTop -150
                            break;
                        }
                        // console.log(this.indextime)
                        // console.log(this.$refs.lyrictext.children[2].of=50)

                    }

                }
            }
        },
    }
</script>

<style scoped>
    .box{
        position: relative;
    }
    .colortext{
        color: red;
    }
    .slider{
        width: 80%;
        margin:10px 10% 0 10%;
    }
    .start{
        position: absolute;
        top: 30px;
        right: 0;
        left: 0;
        z-index: 999;
    }
    .left{
        position: absolute;
        top: 63px;
        /*right: 0;*/
        left: 130px;
        z-index: 999;
    }
    .left-box{
        position: absolute;
        top: 63px;
        /*right: 0;*/
        left: 30px;
        z-index: 999;
    }
    .right{
        position: absolute;
        top: 63px;
        /*right: 0;*/
        right: 130px;
        z-index: 999;
    }
    .right-box{
        position: absolute;
        top: 63px;
        /*right: 0;*/
        right: 30px;
        z-index: 999;
    }
.pointer img{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 38px;
    left: 55%;
    z-index: 999;
}
.header-left{
    height: 30px;
    float: left;
    margin-left: 15px;
    font-size: 20px;
    color: red;
    margin-top: 10px;
    vertical-align: middle;
}
.outer{
    width: 100%;
    height: 696px;
    filter: blur(5px);
    position: relative;
    z-index: 1;
}
    .main-outer{
        width: 200px;
        height: 260px;
        background: url("../img/blackCircle.png") no-repeat;
        margin: 50px auto;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .lyric{
        width: 100%;
        height: 450px;
        /*background-color: white;*/
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 999;
        overflow: scroll;
    }
    .main-outer img{
        width: 150px;
        border-radius: 50%;
        margin-top: 25px;
        animation: move 15s linear infinite paused;
        /*paused*/
        position: relative;
        z-index: 9999;
    }
    @keyframes move {
    from{
        transform: rotate(0deg);
    }
        to{
            transform: rotate(360deg);
        }

    }
    footer{
        width: 100%;
        height: 160px;
        /*margin-bottom: 50px;*/
        position: fixed;
        bottom: 10px;
        z-index: 9999;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>